<template>
  <div class="login-container">
    <div class="login-content">
      <div class="login-left">
        <div class="brand-container">
          <MedicineBoxOutlined class="brand-icon" />
          <h1 class="brand-name">口腔诊疗平台</h1>
        </div>
        <div class="slogan">
          <h2>口腔诊疗平台</h2>
          <p>为您的诊所提供全方位的数字化解决方案</p>
        </div>
        <div class="illustration">
          <TeamOutlined class="illustration-icon" />
        </div>
      </div>
      
      <div class="login-right">
        <div class="login-form-container">
          <h2 class="welcome-text">欢迎使用</h2>
          <p class="login-desc">请登录您的账号以继续</p>
          
          <a-tabs v-model:activeKey="activeKey" class="custom-tabs">
            <a-tab-pane key="account" tab="账号登录">
              <a-form
                :model="loginForm"
                name="login"
                @finish="handleLogin"
                :rules="rules"
                layout="vertical"
              >
                <a-form-item name="username" label="账号">
                  <a-input
                    v-model:value="loginForm.username"
                    placeholder="请输入账号"
                    size="large"
                  >
                    <template #prefix>
                      <UserOutlined class="site-form-item-icon" />
                    </template>
                  </a-input>
                </a-form-item>
                <a-form-item name="password" label="密码">
                  <a-input-password
                    v-model:value="loginForm.password"
                    placeholder="请输入密码"
                    size="large"
                  >
                    <template #prefix>
                      <LockOutlined class="site-form-item-icon" />
                    </template>
                  </a-input-password>
                </a-form-item>
                <a-form-item name="captcha" label="验证码">
                  <div class="captcha-container">
                    <a-input
                      v-model:value="loginForm.captcha"
                      placeholder="请输入验证码"
                      size="large"
                    >
                      <template #prefix>
                        <SafetyCertificateOutlined class="site-form-item-icon" />
                      </template>
                    </a-input>
                    <div class="captcha-image" @click="refreshCaptcha">
                      1234
                    </div>
                  </div>
                </a-form-item>
                <a-form-item>
                  <div class="form-actions">
                    <a-checkbox v-model:checked="loginForm.remember">记住我</a-checkbox>
                    <a class="forgot-link">忘记密码?</a>
                  </div>
                </a-form-item>
                <a-form-item>
                  <a-button
                    type="primary"
                    html-type="submit"
                    size="large"
                    block
                    class="login-button"
                  >
                    登录
                  </a-button>
                </a-form-item>
              </a-form>
            </a-tab-pane>
            
            <a-tab-pane key="sms" tab="短信登录">
              <a-form
                :model="smsForm"
                name="sms"
                @finish="handleSmsLogin"
                :rules="smsRules"
                layout="vertical"
              >
                <a-form-item name="phone" label="手机号">
                  <a-input
                    v-model:value="smsForm.phone"
                    placeholder="请输入手机号"
                    size="large"
                  >
                    <template #prefix>
                      <MobileOutlined class="site-form-item-icon" />
                    </template>
                  </a-input>
                </a-form-item>
                <a-form-item name="smsCode" label="验证码">
                  <div class="captcha-container">
                    <a-input
                      v-model:value="smsForm.smsCode"
                      placeholder="请输入验证码"
                      size="large"
                    >
                      <template #prefix>
                        <SafetyCertificateOutlined class="site-form-item-icon" />
                      </template>
                    </a-input>
                    <a-button 
                      class="sms-button" 
                      :disabled="smsButtonDisabled" 
                      @click="sendSmsCode"
                    >
                      {{ smsButtonText }}
                    </a-button>
                  </div>
                </a-form-item>
                <a-form-item>
                  <a-button
                    type="primary"
                    html-type="submit"
                    size="large"
                    block
                    class="login-button"
                  >
                    登录
                  </a-button>
                </a-form-item>
              </a-form>
            </a-tab-pane>
          </a-tabs>
          
          <div class="register-link">
            <span>还没有账号?</span>
            <a @click="showRegisterModal">立即注册</a>
            <a-divider type="vertical" />
            <span>上级账号?</span>
            <a @click="goToSuperiorLogin">上级登录</a>
          </div>
        </div>
      </div>
    </div>

    <!-- 注册模态框 -->
    <a-modal
      v-model:visible="registerModalVisible"
      title="注册账号"
      width="480px"
      :footer="null"
      centered
      class="register-modal"
    >
      <a-form
        :model="registerForm"
        name="register"
        @finish="handleRegister"
        :rules="registerRules"
        layout="vertical"
      >
        <a-form-item name="username" label="用户名">
          <a-input
            v-model:value="registerForm.username"
            placeholder="请输入用户名"
            size="large"
          >
            <template #prefix>
              <UserOutlined class="site-form-item-icon" />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item name="password" label="密码">
          <a-input-password
            v-model:value="registerForm.password"
            placeholder="请输入密码"
            size="large"
          >
            <template #prefix>
              <LockOutlined class="site-form-item-icon" />
            </template>
          </a-input-password>
        </a-form-item>
        <a-form-item name="confirmPassword" label="确认密码">
          <a-input-password
            v-model:value="registerForm.confirmPassword"
            placeholder="请确认密码"
            size="large"
          >
            <template #prefix>
              <LockOutlined class="site-form-item-icon" />
            </template>
          </a-input-password>
        </a-form-item>
        <a-form-item name="phone" label="手机号">
          <a-input
            v-model:value="registerForm.phone"
            placeholder="请输入手机号"
            size="large"
          >
            <template #prefix>
              <MobileOutlined class="site-form-item-icon" />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item name="smsCode" label="验证码">
          <div class="captcha-container">
            <a-input
              v-model:value="registerForm.smsCode"
              placeholder="请输入验证码"
              size="large"
            >
              <template #prefix>
                <SafetyCertificateOutlined class="site-form-item-icon" />
              </template>
            </a-input>
            <a-button 
              class="sms-button" 
              :disabled="registerSmsButtonDisabled" 
              @click="sendRegisterSmsCode"
            >
              {{ registerSmsButtonText }}
            </a-button>
          </div>
        </a-form-item>
        <a-form-item>
          <a-checkbox v-model:checked="registerForm.agreement">
            我已阅读并同意 <a href="#">《用户协议》</a> 和 <a href="#">《隐私政策》</a>
          </a-checkbox>
        </a-form-item>
        <a-form-item>
          <a-button
            type="primary"
            html-type="submit"
            size="large"
            block
            class="register-button"
          >
            注册
          </a-button>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { 
  UserOutlined, 
  LockOutlined, 
  SafetyCertificateOutlined,
  MobileOutlined,
  MedicineBoxOutlined,
  TeamOutlined
} from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const activeKey = ref('account')
const registerModalVisible = ref(false)

// 账号登录表单
const loginForm = reactive({
  username: '',
  password: '',
  captcha: '',
  remember: false
})

// 短信登录表单
const smsForm = reactive({
  phone: '',
  smsCode: ''
})

// 注册表单
const registerForm = reactive({
  username: '',
  password: '',
  confirmPassword: '',
  phone: '',
  smsCode: '',
  agreement: false
})

// 账号登录验证规则
const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 4, max: 20, message: '用户名长度必须在4-20个字符之间', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度必须在6-20个字符之间', trigger: 'blur' }
  ],
  captcha: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { len: 4, message: '验证码长度必须为4位', trigger: 'blur' }
  ]
}

// 短信登录验证规则
const smsRules = {
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  smsCode: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { len: 6, message: '验证码长度必须为6位', trigger: 'blur' }
  ]
}

// 注册验证规则
const registerRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 4, max: 20, message: '用户名长度必须在4-20个字符之间', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度必须在6-20个字符之间', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度必须在6-20个字符之间', trigger: 'blur' },
    {
      validator: (rule, value) => {
        if (value !== registerForm.password) {
          return Promise.reject('两次输入的密码不一致')
        }
        return Promise.resolve()
      },
      trigger: 'blur'
    }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  smsCode: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { len: 6, message: '验证码长度必须为6位', trigger: 'blur' }
  ],
  agreement: [
    { 
      validator: (rule, value) => {
        if (!value) {
          return Promise.reject('请阅读并同意用户协议和隐私政策')
        }
        return Promise.resolve()
      },
      trigger: 'change' 
    }
  ]
}

// 短信验证码按钮状态
const smsButtonDisabled = ref(false)
const smsButtonText = ref('获取验证码')
const smsCountdown = ref(60)
let smsTimer = null

// 注册短信验证码按钮状态
const registerSmsButtonDisabled = ref(false)
const registerSmsButtonText = ref('获取验证码')
const registerSmsCountdown = ref(60)
let registerSmsTimer = null

const emit = defineEmits(['update:isLoggedIn'])

// 账号登录处理
const handleLogin = (values) => {
  console.log('login form', values)
  message.success('登录成功')
  emit('update:isLoggedIn', true)
  router.push('/dashboard')
}

// 短信登录处理
const handleSmsLogin = (values) => {
  console.log('sms login form', values)
  message.success('登录成功')
  emit('update:isLoggedIn', true)
  router.push('/dashboard')
}

// 注册处理
const handleRegister = (values) => {
  console.log('register form', values)
  message.success('注册成功')
  registerModalVisible.value = false
}

// 显示注册模态框
const showRegisterModal = () => {
  registerModalVisible.value = true
}

// 刷新验证码
const refreshCaptcha = () => {
  // 这里可以添加刷新验证码的逻辑
  console.log('refresh captcha')
}

// 发送短信验证码
const sendSmsCode = () => {
  if (!/^1[3-9]\d{9}$/.test(smsForm.phone)) {
    message.error('请输入正确的手机号')
    return
  }
  
  smsButtonDisabled.value = true
  smsButtonText.value = `${smsCountdown.value}秒后重新获取`
  
  smsTimer = setInterval(() => {
    smsCountdown.value--
    smsButtonText.value = `${smsCountdown.value}秒后重新获取`
    
    if (smsCountdown.value <= 0) {
      clearInterval(smsTimer)
      smsButtonDisabled.value = false
      smsButtonText.value = '获取验证码'
      smsCountdown.value = 60
    }
  }, 1000)
  
  message.success('验证码已发送')
}

// 发送注册短信验证码
const sendRegisterSmsCode = () => {
  if (!/^1[3-9]\d{9}$/.test(registerForm.phone)) {
    message.error('请输入正确的手机号')
    return
  }
  
  registerSmsButtonDisabled.value = true
  registerSmsButtonText.value = `${registerSmsCountdown.value}秒后重新获取`
  
  registerSmsTimer = setInterval(() => {
    registerSmsCountdown.value--
    registerSmsButtonText.value = `${registerSmsCountdown.value}秒后重新获取`
    
    if (registerSmsCountdown.value <= 0) {
      clearInterval(registerSmsTimer)
      registerSmsButtonDisabled.value = false
      registerSmsButtonText.value = '获取验证码'
      registerSmsCountdown.value = 60
    }
  }, 1000)
  
  message.success('验证码已发送')
}

// 跳转到上级账号登录页面
const goToSuperiorLogin = () => {
  router.push('/superior-login')
}
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f8fa;
  overflow: hidden;
}

.login-content {
  display: flex;
  width: 900px;
  height: 600px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.login-left {
  width: 40%;
  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
  padding: 40px;
  display: flex;
  flex-direction: column;
  color: white;
}

.brand-container {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}

.brand-icon {
  font-size: 36px;
  margin-right: 12px;
}

.brand-name {
  font-size: 28px;
  font-weight: 600;
  margin: 0;
}

.slogan {
  margin-bottom: 60px;
}

.slogan h2 {
  font-size: 24px;
  margin: 0 0 16px 0;
  font-weight: 600;
}

.slogan p {
  font-size: 16px;
  opacity: 0.8;
  line-height: 1.6;
}

.illustration {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.illustration-icon {
  font-size: 160px;
  opacity: 0.2;
}

.login-right {
  width: 60%;
  padding: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-form-container {
  width: 100%;
  max-width: 400px;
}

.welcome-text {
  font-size: 28px;
  font-weight: 600;
  color: #262626;
  margin: 0 0 8px 0;
}

.login-desc {
  font-size: 16px;
  color: #8c8c8c;
  margin-bottom: 32px;
}

.custom-tabs {
  margin-bottom: 24px;
}

:deep(.ant-tabs-nav) {
  margin-bottom: 24px;
}

:deep(.ant-tabs-tab) {
  padding: 12px 0;
  font-size: 16px;
  margin-right: 32px;
}

:deep(.ant-tabs-tab + .ant-tabs-tab) {
  margin-left: 0;
}

:deep(.ant-tabs-ink-bar) {
  height: 3px;
  border-radius: 3px;
  background-color: #1890ff;
}

:deep(.ant-form-item) {
  margin-bottom: 10px;
}

:deep(.ant-form-item-label > label) {
  font-size: 14px;
  color: #262626;
}

.site-form-item-icon {
  color: #bfbfbf;
}

.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.forgot-link {
  color: #1890ff;
  font-size: 14px;
  cursor: pointer;
}

.login-button, .register-button {
  height: 44px;
  font-size: 16px;
  border-radius: 6px;
}

.captcha-container {
  display: flex;
  gap: 12px;
}

.captcha-image {
  min-width: 120px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #f5f5f5;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  font-size: 16px;
  font-weight: bold;
  color: #1890ff;
}

.sms-button {
  min-width: 120px;
  height: 40px;
  border-radius: 6px;
}

.register-link {
  text-align: center;
  margin-top: 24px;
  font-size: 14px;
  color: #8c8c8c;
}

.register-link a {
  color: #1890ff;
  margin-left: 4px;
  cursor: pointer;
}

:deep(.register-modal .ant-modal-content) {
  border-radius: 12px;
  overflow: hidden;
}

:deep(.register-modal .ant-modal-header) {
  padding: 20px 24px;
  border-bottom: 1px solid #f0f0f0;
}

:deep(.register-modal .ant-modal-title) {
  font-size: 18px;
  font-weight: 600;
  color: #262626;
}

:deep(.register-modal .ant-modal-body) {
  padding: 24px;
}

@media (max-width: 768px) {
  .login-content {
    width: 100%;
    height: 100vh;
    flex-direction: column;
    border-radius: 0;
  }
  
  .login-left {
    width: 100%;
    height: 30%;
    padding: 24px;
  }
  
  .login-right {
    width: 100%;
    height: 70%;
    padding: 24px;
  }
  
  .brand-container {
    margin-bottom: 20px;
  }
  
  .slogan {
    margin-bottom: 20px;
  }
  
  .slogan h2 {
    font-size: 20px;
    margin-bottom: 8px;
  }
  
  .illustration {
    display: none;
  }
}
</style>